<template>
	<view class="home-wrapper">
		<view class="home-top-wrapper">
			<view class="statusBarHeight" :style="{ height: '24px' }"  ref="statusHeight"></view>
			<view class="home-top-search  flex-c-s">
				<view class="left-address-info flex-c" @click="getLocation">
					<view class="map-icon flex-c">
						<image src="/static/images/map-pin@2x.png" mode="aspectFill"></image>
					</view>
					<view class="current-address text-flemp1">{{ address }}</view>
					<view class="map-sj flex-c">
						<image src="/static/images/Polygon1@2x.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="right-input-area flex-c-s">
					<view class="flex-c">
						<image class="search-icon" src="/static/images/search@2x.png" mode="aspectFill"></image>
						<input type="text" v-model="keyword" class="search-input" placeholder="输入关键词搜索" />
					</view>
					<button class="search-btn" @click="toSearch">搜索</button>
				</view>
			</view>
			
			<view class="home-banner">
				<swiper indicator-dots circular autoplay indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#EB5883"  class="swiper-box" @change="change" :current="swiperDotIndex" 
				style="height: 400rpx;border-radius: 10rpx;overflow: hidden;">
					<swiper-item v-for="(item ,index) in bannerList" :key="index" >
						<view class="swiper-item" style="height: 400rpx;border-radius: 10rpx;overflow: hidden;">
							<image :src="item" style="width: 702rpx; height: 400rpx; border-radius: 10rpx;" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="home-nav-wrapper flex-c-s">
			<view class="nav-item" @click="networkHandle">
				<image src="/static/images/Frame13@2x.png" mode=""></image>
				<view class="nav-text">全国网点</view>
			</view>
			<view class="nav-item" @click="showHall">
				<image src="/static/images/Frame11@2x.png" mode=""></image>
				<view class="nav-text">产品展示</view>
			</view>
			<view class="nav-item" @click="joinHandle">
				<image src="/static/images/Frame12@2x.png" mode=""></image>
				<view class="nav-text">招商加盟</view>
			</view>
			<view class="nav-item" @click="notice">
				<image src="/static/images/Frame10@2x.png" mode=""></image>
				<view class="nav-text">行业资讯</view>
			</view>
		</view>
		<view class="home-notes-wrapper flex-c-s" > 
			<view class="left-notes-icon flex-c">
				<image src="/static/images/volume-1@2x.png" mode=""></image>
			</view>
			<swiper vertical circular autoplay   @change="change" :current="swiperDotIndex"
			style="height: 50rpx; flex: 1;">
				<swiper-item v-for="(item ,index) in noticeList" :key="index" >
					<view class="swiper-item flex-c text-flemp1" style="font-size: 26rpx;color: #999;">
						{{ item }} 
					</view>
				</swiper-item>
			</swiper>
		</view> 
		
		<view class="home-goods-wrapper flex-c-s">
			<view class="goods-item" @click="storeInfo(s.id)" v-for="s of storeList" :key="s.id">
				<image class="goods-image" :src="s.listImage"  mode="aspectFill"></image>
				<view class="goods-info">
					<view class="goods-item-name text-flemp1">{{s.storeName}}</view>
					<view class="goods-item-tags flex-c-s">
						<view class="goods-item-tags-item">{{s.status_value}}</view>
						<view class="goods-item-tags-item">{{ s.openingTime}}~{{s.closingTime}}</view>
						<view class="goods-item-tags-item" v-if="Number.parseFloat(`${s.distance}`) > 1000">{{Number.parseFloat(`${s.distance  / 1000}`).toFixed(1)}} km</view>
						<view class="goods-item-tags-item" v-else>{{Number.parseFloat(`${s.distance  / 1000}`).toFixed(1)}} km</view>
					</view>
					<view class="goods-item-address flex-c-s">
						<view class="store-info text-flemp1">{{s.address}}</view>
						<image class="add-icon" src="/static/images/navigation@2x.png"></image>
					</view>
				</view>
			</view>
		</view>
		
		<u-loadmore v-show="storeList.length" :status="statusText" marginTop="20" :loading-text="loadingText" 
		        :loadmore-text="loadmoreText"  :nomore-text="nomoreText" line />
		
		<view class="customer-service-btn flex-c-c" @click="customerService"> 
			<image src="/static/images/Frame8@2x.png" style="width: 84rpx; height: 84rpx;" mode=""></image>
		</view>
	</view>
</template>

<script lang="ts">
import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
import { onReady, onLoad, onShow, onReachBottom} from '@dcloudio/uni-app' 
import { getStoreList, getNotice, publicDictionaryData } from '@/http/home'
import { getLocationInfo } from '@/utils/tools'

import type { IHomeStore } from '@/types/index'

var qiyuModule = uni.requireNativePlugin("Netease-QiyuModule")
export default defineComponent({
	setup() { 
		const statusHeight = ref('30px')
		const address = ref('定位中') 
		const swiperDotIndex = ref(0) 
		const current = ref(1)  
		
		const state = reactive({  
			keyword: '',
			mode: 'round',
			dotsStyles: {},
			locationInfo: {
				province: '',
				city: '',
				area: ''
			},
			total: 0,
			pageSize: 10,
			page: 1,
			storeList: [] as Array<IHomeStore>,
			latitude: 0,
			longitude: 0,
			bannerList: [] as Array<string>,
			noticeList: [] as Array<string>,
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '没有更多了',
		})
		onLoad(async () => { 
			uni.getSystemInfo().then( res => { 
				statusHeight.value  = `${res.statusBarHeight}px`
			})
			getBannerList()
			getNoticeData() 
			
			
			try{
				qiyuModule.initSdk()
			}catch(e){  }
			
			try{
				let res = await getLocationInfo()
				console.log(res, 666);
				if(res.code === 1) {
					address.value = res.data.district
					state.latitude = res.latitude
					state.longitude = res.longitude
				} else {
					address.value = '重新定位'
				} 
			}catch(e){
				//TODO handle the exception
			} finally {
				state.storeList = []
				state.page = 1
				getStoreListData();
			}
		})
		
		onShow(async () =>{
			// getStoreListData() 
			// uni.getStorage({
			// 	key: 'userInfo',
			// 	success(res) {
			// 		console.log(res);
			// 	}
			// })
			
			// uni.getStorage({
			// 	key: 'loginInfo',
			// 	success(res) {
			// 		console.log(res);
			// 	}
			// })
			
			
			
		})
		
		const statusText = computed(() => {
			return state.total === state.storeList.length ? 'nomore' : 'loadmore'
		})
		
		
		const getStoreListData = async () => {
			let res = await getStoreList({ 
				page: state.page,
				pageSize: state.pageSize,
				userLatitude: state.latitude,
				userLongitude: state.longitude
			})
			if(res.code === 0) {
				state.storeList = [...state.storeList, ...res.data?.list || []]
				state.total = res.data?.total
			} 
		}
		
		const getBannerList = async () => {
			let res = await publicDictionaryData('banners')
			if(res.code === 0) {
				state.bannerList = res.data?.data || []
			} else {
				uni.showToast({
					title: res.msg || '加载失败',
					icon: 'fail'
				})
			}
		}
		
		const getNoticeData = async () => {
			let res = await getNotice()
			if(res.code === 0) {
				state.noticeList = res.data.data || []
			}  
		}
		
		onReachBottom(() => { // 页面触底事件 
			if(state.total === 0) return;
			if(state.total === state.storeList.length) return;
			state.page ++
			getStoreListData()  
		})
		
		onReady(async () => {
			checkUpdate()
			
		})
		const getLocation = () => {
			uni.navigateTo({
				url: '/pages/indexPackge/location/location',
				success() {
					uni.$once('addeventListenerLocation', (res) => {
						address.value = res 
					})
				}
			}) 
		}
		const change = (e: any) => { 
			current.value = e.detail.current 
		}
		const login = () => {
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}
		const toLink = () => { 
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}
		
		const storeInfo = (id: number) => {
			uni.navigateTo({
				url: `/pages/indexPackge/storeInfo/index?id=${id}`
			})
		}
		
		const customerService = () => { // 跳转客服
			qiyuModule.openServiceActivity({
				title: '客服会话',
				source: {
					title: 'xad-y89',
					ios_sendProduct: false,
				},
			})
		}
		
		const joinHandle = () => { // 招商加盟
			uni.navigateTo({
				url: '/pages/indexPackge/tabs/join'
			})
		}
		const networkHandle = () => { // 招商加盟
			uni.navigateTo({
				url: '/pages/indexPackge/network/network'
			})
			
		}
		const notice = () => { // 招商加盟
			uni.navigateTo({
				url: '/pages/indexPackge/tabs/notice'
			})
		}
		const showHall = () => { // 展厅
			uni.navigateTo({
				url: '/pages/indexPackge/tabs/hall'
			})
		}
		
		const toSearch = () => {
			if(!state.keyword) {
				uni.showToast({ title: '请输入要搜索的商品名称', icon: 'none' })
				return
			}
			uni.navigateTo({
				url: `/pages/shopPackge/goodsList/index?keyword=${state.keyword}&businessType=2`
			})
		}
		
		return {
			statusHeight,
			address, 
			swiperDotIndex,
			change, 
			current,
			toLink,
			login,
			getLocation,
			storeInfo,
			customerService,
			joinHandle,
			networkHandle,
			notice,
			statusText,
			showHall, 
			toSearch,
			...toRefs(state)
		}
	}
})
</script>
<style>
page{ background: #f8f8fa;  }
::v-deep .amap-logo {
 opacity: 0 !important;
}
::v-deep .amap-copyright {
 opacity: 0 !important;
}
</style>
<style lang="scss" scoped>

.home-wrapper {
	padding-bottom: 24rpx;
	.home-top-wrapper{  
		background: linear-gradient(180deg,#ffc0d7, rgba(249,222,232,0.00) 96%);
		.home-top-search{
			height: 64rpx;
			margin: 0 24rpx;
			margin-top: 24rpx;
			.left-address-info{
				width: 166rpx;
				.map-icon{
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
				.map-sj{
					image{
						width: 20rpx;
						height: 12rpx;
					}
				}
				.current-address{
					font-size: 32rpx;
					color: #000;
					margin: 0 4rpx;
				}
			}
			.right-input-area{
				display: flex;
				flex: 1;
				height: 64rpx;
				background-color: #fff;
				border-radius: 32rpx;
				margin-left: 32rpx;
				.search-icon{
					width: 32rpx;
					height: 32rpx;
					margin: 0 16rpx 0 14rpx;
				}
				.search-input{
					flex: 1;
					height: 34rpx;
				}
				.search-btn{
					// #ifdef APP
						background-color: $theme-primary-color;
					// #endif
					//background-color: var($theme-primary-color);
					width: 120rpx;
					height: 52rpx; 
					border-radius: 30rpx;
					line-height:  52rpx; 
					font-size: 24rpx;
					color: #fff;
					margin: 0 6rpx 0 0rpx;
				}
			}
		}
	}
	.home-nav-wrapper{
		height: 140rpx;
		background-color: #fff;
		padding: 0 46rpx;
		margin: 0 24rpx;
		border-radius: 16rpx;
		.nav-item{
			text-align: center;
			color: #666666;
			font-size: 26rpx;
			image{
				width: 72rpx;
				height: 68rpx;
			}
		}
	}
	.home-banner{
		margin: 24rpx;
	}
	.home-notes-wrapper{
		margin: 16rpx 24rpx;
		height: 76rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		
		.left-notes-icon{
			margin: 0 10rpx 0 20rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.home-goods-wrapper{
		flex-wrap: wrap;
		margin: 0 24rpx;
		.goods-item{
			width: 342rpx;
			height: 540rpx;
			background: #ffffff;
			border-radius: 8rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			.goods-image{
				width: 342rpx;
				height: 364rpx;
			}
			.goods-info{
				padding: 16rpx;
				.goods-item-name{
					font-size: 26rpx;
					font-weight: 500
				}
				.store-info{
					width: 238rpx;
					font-size: 22rpx;
				}
				.add-icon{
					width: 48rpx;
					height: 48rpx;
				}
				.goods-item-tags{ 
					margin:6rpx 0 20rpx 0;
					.goods-item-tags-item{
						height: 32rpx;
						border: 1rpx solid #eb5883;
						border-radius: 8rpx;
						// #ifdef APP
							color: $theme-primary-color;
						// #endif
						font-size: 20rpx;
						text-align: center;
						line-height: 32rpx;
						padding: 0 4rpx;
					}
				}
			}
		}
	}
	
}


</style>
